<template>
  <transition name="slide">
    <div class="box" :class="bg" v-show="visible">
      <i class="iconfont icon-toast_chenggong" v-show="type === 'success'"></i>
      <i
        class="iconfont icon-toast-shibai_huaban"
        v-show="type === 'error'"
      ></i>
      <i class="iconfont icon-toast-jinggao" v-show="type === 'warn'"></i>
      <span>{{ text }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  computed: {
    visible() {
      return this.$store.state.toast.visible;
    },
    text() {
      return this.$store.state.toast.text;
    },
    type() {
      return this.$store.state.toast.type;
    },
    bg() {
      let type = this.$store.state.toast.type;
      if (type === "success") {
        return "success";
      } else if (type === "error") {
        return "error";
      } else if (type === "warn") {
        return "warn";
      } else {
        return "info";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  z-index: 1000;
  top: 40px;
  display: flex;
  align-items: center;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 6px;
  color: #fff;
  box-shadow: 1px 1px 1px rgba(#eee, 0.6);

  &.success {
    background: #67c23a; // 成功
  }
  &.error {
    background: #f56c6c; // 失败
  }
  &.warn {
    background: #e6a23c; // 警告
  }
  &.info {
    background: #909399; // 提示
  }
}
i {
  font-size: 24px;
  margin-right: 10px;
}

// 淡入淡出
// .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
//   opacity: 0;
// }
// .fade-enter-active,
// .fade-leave-active {
//   transition: opacity 0.5s;
// }

.slide-enter, .slide-leave-to {
  top: -100px;
}

.slide-enter-active, .slide-leave-active {
  transition: top .5s;
}
</style>